<template>
  <div >
     <h1 style="color:red;">经典一笔签在先设计网 </h1>
     <!-- 显示区域 -->
     <div class="sign_img" >
      <img :src="signurl" alt="">
     </div>
     <form @submit.prevent="()=>false" class="myform">
       字号： <select v-model="formObj.fsize">
          <option value="30">30</option>
          <option value="40">40</option>
          <option value="50">50</option>
          <option value="60">60</option>

        </select>
        <br>
        名字：<input type="text" v-model="formObj.text">
         <br>
      
          颜色：<input type="color" v-model="formObj.color" > 
          <br>
          背景颜色：<input type="color" v-model="formObj.bgcolor">
          <br>
        间隙： <select v-model="formObj.spacing">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="15">15</option>
  
        </select>
        <br>
        是否阴影：<input name="shadow"  type="radio" value="yes"
        v-model="formObj.shadow">是
            <input v-model="formObj.shadow"  name="shadow" type="radio" value="no">否</br>
      <button style="color:white;background: red;font-size: 30px;" @click="toSign">给我设计</button>
      </form>
  </div>
</template>
<script>
export default {
   data(){
    return {
      signurl:"",//最终后台返回的图片流转的路径
      formObj:{
        fsize:"40",// 字号
        text:"",//名字
        color:"",//颜色
        bgcolor:"",//背景颜色
        spacing:"4",//间隙
        shadow:"yes",//阴影
      }
    }
   },
   methods:{
    toSign(){ //设计签名
      console.log(this.formObj,"表单数据")
      this.$axios({
        url:"/qm/qianming/image.png",
        method:"get",
        // html 表单提交 text json blob arraybuffer
        // ‌ArrayBuffer‌：适用于高性能处理场景，如图像处理、网络通信等，直接操作内存提升效率。 ‌              
        // ‌Blob‌：常用于文件操作，如上传文件、创建 Object URL 显示媒体内容。 ‌
        // Blob可能由多个ArrayBuffer组成，但单个Blob不可直接转换为ArrayBuffer
        responseType:"blob", //告诉后台返回的是blob数据
        params:{
          ...this.formObj,
          color:this.formObj.color.slice(1),//发送颜色去掉#
          bgcolor:this.formObj.bgcolor.slice(1)
        }

      }).then(res=>{
          // 后台返回的arraybuffer的数据图片流
 
        
        console.log(res.data,"返回的签名数据")
          // 将图片流转为链接用URL.createObjectURL
        // 
        let blob=new Blob([res.data],{type:"image/png"})
        // 将本地图片 转为链接使用
  
         this.signurl=URL.createObjectURL(blob);
      
       
        console.log(this.signurl,"---")

      })
    }
   }
}
</script>
<style lang="scss" scoped>
  .myform{
    width: 800px;
    height: 400px;
    text-align: left;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
</style>